import React from 'react';
import { Card, Table, TableProps } from 'antd';
import { CardProps } from 'antd/es/card';
import styles from './styles.module.css';

export interface TableCardProps extends Omit<CardProps, 'children'> {
  // 表格属性
  tableProps: TableProps<any>;
  // 是否显示表格边框
  bordered?: boolean;
  // 表格容器自定义样式
  tableClassName?: string;
}

/**
 * 统一的表格卡片组件
 * 用于所有需要在卡片中显示表格的场景
 * 提供统一的样式和交互效果
 */
const TableCard: React.FC<TableCardProps> = ({
  tableProps,
  bordered = true,
  tableClassName,
  className,
  ...cardProps
}) => {
  return (
    <Card
      {...cardProps}
      className={`${styles.tableCard} ${className || ''}`}
    
    >
      <Table
        {...tableProps}
        bordered={bordered}
        className={`${styles.table} ${tableClassName || ''}`}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => 
            `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          ...tableProps.pagination,
        }}
      />
    </Card>
  );
};

export default TableCard; 